<!-- 任务操作菜单组件 -->
<template>
  <view class="task-actions-wrapper">
    <!-- 专用遮罩层，确保不会遮挡关键交互区域 -->
    <view class="actions-mask" v-if="show" @click="onClose"></view>
    
    <u-popup
      :show="show"
      mode="bottom"
      :z-index="1000"
      @close="onClose"
      :safe-area-inset-bottom="true"
      height="auto"
      border-radius="16"
      :overlay="false"
    >
      <view class="task-actions-container">
        <view class="task-info">
          <text class="task-title">{{ taskTitle }}</text>
        </view>
        
        <view class="action-list">
          <view class="action-item" @click="onEdit">
            <u-icon name="edit-pen" size="22" color="#2979ff"></u-icon>
            <text class="action-text">编辑任务</text>
          </view>
          
          <view class="action-item" @click="onToggleStatus">
            <u-icon :name="taskStatus === 'done' ? 'reload' : 'checkbox-mark'" size="22" :color="taskStatus === 'done' ? '#ff9900' : '#19be6b'"></u-icon>
            <text class="action-text">{{ taskStatus === 'done' ? '重新开始' : '标记完成' }}</text>
          </view>
          
          <view class="action-item" @click="onTimer">
            <u-icon name="clock" size="22" color="#9c26b0"></u-icon>
            <text class="action-text">开始计时</text>
          </view>
          
          <view class="action-item delete-action" @click="onDelete">
            <u-icon name="trash" size="22" color="#fa3534"></u-icon>
            <text class="action-text delete-text">删除任务</text>
          </view>
        </view>
        
        <view class="cancel-button" @click="onClose">
          <text class="cancel-text">取消</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'TaskActions',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    task: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    // 安全获取任务属性
    taskTitle() {
      return this.task && this.task.title ? this.task.title : '未命名任务';
    },
    
    taskStatus() {
      return this.task && this.task.status ? this.task.status : 'todo';
    }
  },
  methods: {
    // 关闭菜单
    onClose() {
      this.$emit('close');
    },
    
    // 编辑任务
    onEdit() {
      this.$emit('edit', this.task);
      this.onClose();
    },
    
    // 切换任务状态
    onToggleStatus() {
      if (this.task && this.task.id) {
        this.$emit('toggle-status', this.task.id);
      }
      this.onClose();
    },
    
    // 开始计时
    onTimer() {
      if (this.task && this.task.id) {
        this.$emit('timer', this.task.id);
      }
      this.onClose();
    },
    
    // 删除任务
    onDelete() {
      if (this.task && this.task.id) {
        uni.showModal({
          title: '确认删除',
          content: '确定要删除这个任务吗？此操作不可恢复。',
          confirmText: '删除',
          confirmColor: '#fa3534',
          success: (res) => {
            if (res.confirm) {
              this.$emit('delete', this.task.id);
            }
          }
        });
      }
      this.onClose();
    }
  }
}
</script>

<style lang="scss" scoped>
.task-actions-wrapper {
  position: relative;
}

.task-actions-container {
  background-color: var(--background-color);
  padding: 20px;
}

.actions-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.task-info {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
}

.task-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-list {
  margin-bottom: 20px;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.action-text {
  font-size: 16px;
  color: var(--text-color);
  margin-left: 12px;
}

.delete-action {
  border-bottom: none;
}

.delete-text {
  color: #fa3534;
}

.cancel-button {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  border-radius: 25px;
  margin-top: 10px;
}

.cancel-text {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}
</style> 